<template>
	<view>
		<u-navbar
			title="搜索"
			placeholder
			:autoBack="true"
		>
		</u-navbar>
		<view style="padding: 0 32rpx;">
			<view style="height: 16px;"/>
			<u-search maxlength="20" @clear="handleClear" v-model="keyword" @search="handleSearch" @custom="handleSearch" bgColor="#fff" placeholder="请输入商品名称"></u-search>
			<view style="height: 16px;"/>
		</view>
		<scroll-view :scroll-y="true" :style="{height: scrollViewHeight}">
			<view style="padding: 16rpx 32rpx;padding-top: 0;" v-if="dataList.length === 0">
				<view class="history">
					<view class="history-title">
						<text :style="{color: appColor}">历史记录</text>
						<text @click="removeHistory" v-if="historyList.length>0" style="font-size: 36rpx;" class="iconfont icon-shanchu"></text>
					</view>
					<view class="history-content">
						<view @click="tagCheck(name)" class="history-content-item" v-for="(name, index) in historyList" :key="index">{{name}}</view>
						<view style="width: 100%;" v-if="historyList.length===0">
							<u-empty
							    mode="history"
								icon="http://cdn.uviewui.com/uview/empty/history.png"
							>
							</u-empty>
						</view>
					</view>
				</view>
			</view>
				<template v-if="isEmpty">
					<view>
						<u-empty
						    mode="data"
							icon="http://cdn.uviewui.com/uview/empty/data.png"
						>
						</u-empty>
					</view>
					<view style="width: 100%;">
						<u-divider text="为您推荐" :textColor="appColor"></u-divider>
					</view>
				</template>
				<view class="shop-center-box">
					<view @click="toDetail(shop)" class="shop-center-item" v-for="shop in dataList" :key="shop.id">
						<u--image mode="aspectFill" :src="shop.image[0].url" width="100%" height="300rpx"></u--image>
						<view class="shop-center-item-name u-line-2">{{shop.goodsName}}</view>
						<view class="shop-center-item-price">
							<view class="shop-center-item-price-l">
								<text>&yen;{{shop.price}}</text>	
								<text style="padding-left: 8rpx;font-size: 28rpx;color: #999;text-decoration: line-through;">&yen;{{shop.oldPrice}}</text>
							</view>
							<view class="shop-center-item-price-r">
								<text>已售{{shop.salesNum}}</text>
							</view>
						</view>
					</view>
				</view>
		</scroll-view>
	</view>	
</template>

<script>
	import {searchGoods} from '@/api/shop.js';
	const key = 'historyList';
	export default {
		data() {
			return {
				historyList: [],
				keyword: '',
				dataList: [],
				isEmpty: false
			}
		},
		computed: {
			appColor() {
				return this.appPrimaryColor
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 - 34 - 32 + 'px';
			},
		},
		methods: {
			// 清楚
			handleClear() {
				this.keyword = '',
				this.isEmpty = false;
				this.dataList = [];
			},
			tagCheck(name) {
				this.keyword = name;
				this.handleSearch();
			},
			handleSearch() {
				if(!uni.$u.trim(this.keyword)) {
					return this.$cuTip('请输入商品名称');
				}
				this.$cuLoading('搜索中').then(() => {
					console.log(this.historyList);
					searchGoods({goodsName: this.keyword}).then(res => {
						if(this.historyList.findIndex(item => item === this.keyword) === -1) {
							let list = [this.keyword, ...this.getHistory()];
							this.historyList = list;
							this.setHistory(list)
						}
						this.dataList = res.result.data.records.length > 0 ? res.result.data.records : res.result.recommend
						this.isEmpty = res.result.data.records.length === 0;
					}).finally(() => {
						uni.hideLoading();
					})
				})
			},
			// 详情页面
			toDetail({id, goodsCategory}) {
				uni.navigateTo({
					url: `/pages/shop/shopDetail?id=${id}&goodsCategory=${goodsCategory}`
				});
			},
			setHistory(list) {
				uni.setStorageSync(key, list);
			},
			getHistory() {
				return uni.getStorageSync(key);
			},
			removeHistory() {
				uni.removeStorageSync(key);
				this.historyList = [];
			},
		},
		onLoad() {
			this.historyList = this.getHistory() || [];
		}
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.shop-center-box {
		width: 100%;
		padding: 32rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		.shop-center-item {
			width: 48%;
			margin-bottom: 32rpx;
			border-radius: 16rpx;
			background-color: #fff;
			overflow: hidden;
			&:nth-child(odd) {
				margin-right: 4%;
			}
			.shop-center-item-name {
				font-size: 28rpx;
				color: #000;
				padding: 0 16rpx;
				margin-top: 16rpx;
			}
			.shop-center-item-price {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 16rpx;
				padding-top: 8rpx;
				.shop-center-item-price-l {
					font-size: 32rpx;
					color: #f40215;
				}
				.shop-center-item-price-r {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}
	
	.history {
		padding: 32rpx;
		background-color: #fff;
		border-radius: 16rpx;
		.history-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
		}
		.history-content {
			padding-top: 16rpx;
			display: flex;
			flex-wrap: wrap;
			.history-content-item {
				height: 48rpx;
				padding: 0 32rpx;
				text-align: center;
				border-radius: 48rpx;
				font-size: 24rpx;
				line-height: 48rpx;
				margin-right: 16rpx;
				margin-bottom: 16rpx;
				color: #666;
				background-color: #f2f3f5;
			}
		}
	}
</style>
